<template>
	<view>
		<view class="hi-user">
			Hi，{{myinfo.realName}}
		</view>
		<view class="my">

			<view class="region">
				<view class="region-text">
					所在地区（你分属的销售地区）
				</view>
				<view class="region-input">
					<text style="display: block;" v-for="(n,index) in myinfo.area" :key="n">
						{{ n }}
					</text>
				</view>
			</view>
			<view class="mobile">
				<view class="mobile-text">
					手机号码（让客户第一时间联系到您）
				</view>
				<view class="mobile-input">
					{{myinfo.userMobile}}
				</view>
			</view>
		</view>
		<view class="yqm" @click="sharePoster">
			我的邀请码
		</view>
		<view>
			<!--模态弹窗-->
			<qrcode-poster ref="poster"></qrcode-poster>
		</view>
	</view>
</template>

<script>
	import {
		areaList
	} from "../../common/area"
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import QrcodePoster from '@/components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue'

	export default {
		components: {
			uniIcons,
			QrcodePoster
		},
		onLoad() {
			this.api.getBusinessInfo()
				.then(res => {
					const {
						data
					} = res.data
					const htmls = []
					if (data && data.salesAreas && data.salesAreas.length > 0) {
						data.salesAreas.forEach(item => {
							// const area = `${areaList.province_list[item.province]}/${areaList.city_list[item.city]}/${areaList.county_list[item.district]}`
							const area = item.areaName
							htmls.push(area)
						})
					}

					this.myinfo = {
						...data,
						area: htmls
					}
				})
		},
		data() {
			return {
				myinfo: {},
				is_show_model: false //是否显示分享模态窗
			};
		},
		methods: {
			getLogin() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			sharePoster() {
				
				//获取带参数二维码
			   this.is_show_model = false
			   this.$refs.poster.showCanvas('https://oss.zhangyubk.com/cmqrcode.jpg')
			}
		}
	}
</script>

<style lang="less" scoped>
	.share {
		position: fixed;
		color: #FFFFFF;
		right: 0;
		bottom: 190rpx;
		background: linear-gradient(to bottom right, #FE726B, #FE956B);
		padding: 10rpx 10rpx 10rpx 20rpx;
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		box-shadow: 0 0 20upx rgba(0, 0, 0, .09);
	}

	.yqm {
		width: 620rpx;
		height: 96rpx;
		border-radius: 8rpx;
		background-color: #077840;
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
		font-weight: 700;
		line-height: 96rpx;
		margin: 0 auto;
	}

	.cancel {
		width: 100vw;
		padding: 30rpx;
		text-align: center;
		background: #FFFFFF;
		color: red;
		font-weight: bold;
		font-size: 30rpx;
	}

	.md-content {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 50rpx 0;
	}

	.md-content-item {
		margin: 0 70rpx;
		position: relative;
	}

	.md-content-item image {
		width: 100rpx;
		height: 100rpx;
	}

	.md-content-item view {
		margin-top: 15rpx;
		font-size: 28rpx;
	}

	.sharebtn {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
	}

	.hi-user {
		width: 100%;
		height: 120rpx;
		background-color: #F9F9F9;
		font-size: 44rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 120rpx;
		padding-left: 30rpx;
		box-sizing: border-box;
	}

	.my {
		padding: 0 30rpx 30rpx 30rpx;
		box-sizing: border-box;

		.region {
			padding: 30rpx 0;
			box-sizing: border-box;
			border-bottom: 2px solid #EEEEEE;

			.region-text {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				color: #999999;
			}

			.region-input {
				input {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}

		}

		.mobile {
			padding: 30rpx 0;
			box-sizing: border-box;
			border-bottom: 2px solid #EEEEEE;

			.mobile-text {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.mobile-input {
				display: flex;
				justify-content: space-between;

				input {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #3333333;
				}

				.forward-icon {
					width: 10px;
					height: 18px;
					color: #333333;
				}
			}
		}
	}
</style>